import React, { useState, useRef } from 'react';
import { Button, Menu, Dropdown, Icon, Modal, message, Spin } from 'antd';
import PropTypes from 'prop-types';
import request from '@/utils/request';
import styles from '../../styles.less';

const initValues = {
  visible: false,
  viewTitle: '标题',
  viewWidth: 800,
  viewHeight: '100%',
  viewUrl: '',
};

function ButtonGroup({ group, isDropDwon, textAlign = 'left', extraProps }) {
  const [item, setItem] = useState(initValues);
  const ref = useRef(null);

  const hanldeButton = async (e, item) => {
    e.preventDefault();
    e.stopPropagation();

    const {
      action,
      displayMode,
      method,
      viewTitle = '标题',
      viewUrl,
      viewWidth = 800,
      viewHeight = '100%',
    } = item;

    if (action) {
      const {
        success,
        data: { ok, reason },
        errMessage,
      } = await request(action, { method, data: extraProps });
      if (success) {
        if (ok) {
          if (viewUrl) {
            setItem({
              visible: true,
              viewTitle,
              viewWidth,
              viewHeight,
              viewUrl,
            });
          } else {
            message.error('缺少【viewUrl】配置');
          }
        } else {
          message.error(reason || '请求失败');
        }
      } else {
        message.error(errMessage || '请求失败');
      }
    }
  };

  return (
    <div className={styles.buttonGroup} style={{ textAlign }} ref={ref}>
      {group.length > 0
        ? group.map(item => (
            <Button
              key={JSON.stringify(item)}
              type={item.buttonType}
              onClick={e => hanldeButton(e, item)}
            >
              {item.label}
            </Button>
          ))
        : null}
      {/* <Dropdown
        overlay={
          <Menu onClick={() => {}}>
            <Menu.Item key="1">1st item</Menu.Item>
            <Menu.Item key="2">2nd item</Menu.Item>
            <Menu.Item key="3">3rd item</Menu.Item>
          </Menu>
        }
      >
        <Button type="primary">
          Actions <Icon type="down" />
        </Button>
      </Dropdown>
      <Button type="link">跳转链接</Button> */}

      <Modal
        title={item.viewTitle}
        getContainer={ref.current}
        destroyOnClose
        width={item.viewWidth}
        bodyStyle={{ height: item.viewHeight }}
        centered
        onOk={() => {
          setItem(initValues);
        }}
        visible={item.visible}
        onCancel={() => setItem(initValues)}
        footer={null}
      >
        {item.visible && item.viewUrl ? (
          <iframe
            title={item.viewTitle}
            frameBorder="0"
            width="100%"
            height="100%"
            src={item.viewUrl}
          />
        ) : null}
      </Modal>
    </div>
  );
}

ButtonGroup.defaultProps = {
  isDropDwon: true,
  textAlign: 'left',
  group: [],
  extraProps: {},
};

ButtonGroup.propTypes = {
  isDropDwon: PropTypes.bool,
  textAlign: PropTypes.oneOf(['left', 'center', 'right']),
  group: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string,
      buttonType: PropTypes.oneOf(['default', 'primary', 'link', 'dashed', 'danger']),
      action: PropTypes.string,
      method: PropTypes.oneOf(['post', 'get', 'put']),
      displayMode: PropTypes.oneOf(['iframe', 'asyncComponent']),
      viewTitle: PropTypes.string,
      viewUrl: PropTypes.string, // 预期是个完整地址，如：http://www.baidu.com
      viewWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      viewHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    })
  ),
  extraProps: PropTypes.object,
};

export default ButtonGroup;
